<template>
  <view class="rm-page">
    <view class="nav">
      <text class="title">意向客户信息收集</text>
    </view>

    <view class="tip">手机或网页版入口，填写企业/意向资料</view>

    <view class="form">
      <view class="group">
        <text class="group-title">基本信息</text>
        <view class="item">
          <text class="label">客户公司名</text>
          <input class="input" v-model.trim="form.company" placeholder="请输入" />
        </view>
        <view class="item">
          <text class="label">公司地址</text>
          <input class="input" v-model.trim="form.address" placeholder="请输入" />
        </view>
        <view class="item">
          <text class="label">联系人</text>
          <input class="input" v-model.trim="form.contact" placeholder="请输入" />
        </view>
        <view class="item">
          <text class="label">联系方式</text>
          <input class="input" v-model.trim="form.phone" placeholder="手机号或座机" type="number" />
        </view>
        <view class="item">
          <text class="label">需求/设备型号</text>
          <input class="input" v-model.trim="form.demand" placeholder="简述需求或设备信息" />
        </view>
        <view class="item">
          <text class="label">数量需求</text>
          <input class="input" v-model.trim="form.quantity" placeholder="数量(选填)" type="number" />
        </view>
        <view class="item">
          <text class="label">技术要求</text>
          <textarea class="textarea" v-model.trim="form.tech" placeholder="如精度/重复定位/速度/环境等"></textarea>
        </view>
        <view class="item">
          <text class="label">预计交期/预算</text>
          <input class="input" v-model.trim="form.schedule" placeholder="例如：2个月 / 预算50万" />
        </view>
      </view>

      <view class="group">
        <text class="group-title">公司与个人介绍</text>
        <view class="item">
          <text class="label">公司简介</text>
          <textarea class="textarea" v-model.trim="form.companyIntro" placeholder="企业背景、主营业务等"></textarea>
        </view>
        <view class="item">
          <text class="label">名片正面</text>
          <view class="uploader">
            <view v-for="(img, i) in form.cardFront" :key="i" class="thumb">
              <image :src="img" mode="aspectFill" class="img" />
              <text class="remove" @click="removeImg('cardFront', i)">×</text>
            </view>
            <view class="add" v-if="form.cardFront.length < 1" @click="pickImage('cardFront',1)">+
            </view>
          </view>
        </view>
        <view class="item">
          <text class="label">名片背面</text>
          <view class="uploader">
            <view v-for="(img, i) in form.cardBack" :key="i" class="thumb">
              <image :src="img" mode="aspectFill" class="img" />
              <text class="remove" @click="removeImg('cardBack', i)">×</text>
            </view>
            <view class="add" v-if="form.cardBack.length < 1" @click="pickImage('cardBack',1)">+
            </view>
          </view>
        </view>
        <view class="item">
          <text class="label">相关资料(最多6张)</text>
          <view class="uploader">
            <view v-for="(img, i) in form.materials" :key="i" class="thumb">
              <image :src="img" mode="aspectFill" class="img" />
              <text class="remove" @click="removeImg('materials', i)">×</text>
            </view>
            <view class="add" v-if="form.materials.length < 6" @click="pickImage('materials', 6 - form.materials.length)">+
            </view>
          </view>
        </view>
      </view>

      <view class="group">
        <text class="group-title">客户状态</text>
        <view class="item">
          <text class="label">客户状态</text>
          <picker :range="statusOptions" :value="statusIndex" @change="onStatusChange">
            <view class="picker">{{ statusOptions[statusIndex] }}</view>
          </picker>
        </view>
        <view class="item">
          <text class="label">是否为客户/代理/已合作</text>
          <switch :checked="form.isExisting" @change="e=>form.isExisting=e.detail.value" />
        </view>
        <view class="item">
          <text class="label">跟进人</text>
          <input class="input" v-model.trim="form.follower" placeholder="填写跟进人姓名" />
        </view>
        <view class="item">
          <text class="label">备注</text>
          <textarea class="textarea" v-model.trim="form.remark" placeholder="其他补充信息"></textarea>
        </view>
      </view>

      <view class="submit-wrap">
        <button class="btn" :class="{ disabled: !canSubmit }" @click="handleSubmit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ReportingManagement',
  data() {
    return {
      form: {
        company: '',
        address: '',
        contact: '',
        phone: '',
        demand: '',
        quantity: '',
        tech: '',
        schedule: '',
        companyIntro: '',
        cardFront: [],
        cardBack: [],
        materials: [],
        isExisting: false,
        follower: '',
        remark: ''
      },
      statusOptions: ['新线索', '跟进中', '已报价', '已签约', '搁置'],
      statusIndex: 0
    }
  },
  computed: {
    canSubmit() {
      const f = this.form
      return (
        f.company && f.contact && f.phone && this.validatePhone(f.phone)
      )
    }
  },
  methods: {
    validatePhone(p) {
      const re = /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})$/
      return re.test(p)
    },
    onStatusChange(e) {
      this.statusIndex = Number(e.detail.value)
    },
    async pickImage(key, count) {
      try {
        const res = await uni.chooseImage({ count: count, sizeType: ['compressed'], sourceType: ['album','camera'] })
        const files = res.tempFilePaths || []
        if (!files.length) return
        if (key === 'materials') {
          this.form.materials = this.form.materials.concat(files).slice(0, 6)
        } else if (key === 'cardFront') {
          this.form.cardFront = files.slice(0,1)
        } else if (key === 'cardBack') {
          this.form.cardBack = files.slice(0,1)
        }
      } catch (e) {
        uni.showToast({ title: '选择图片失败', icon: 'none' })
      }
    },
    removeImg(key, idx) {
      this.form[key].splice(idx, 1)
    },
    async handleSubmit() {
      if (!this.canSubmit) {
        return uni.showToast({ title: '请完善必填信息', icon: 'none' })
      }
      try {
        uni.showLoading({ title: '提交中' })
        // TODO: 接入后端API
        await new Promise(r=>setTimeout(r, 800))
        uni.hideLoading()
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(()=>uni.navigateBack(), 1000)
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rm-page{ background:#f6f7f9; min-height:100vh; }
.nav{ padding:20rpx 30rpx; background:#fff; border-bottom:1rpx solid #eee; position:sticky; top:0; z-index:5; }
.title{ font-size:32rpx; font-weight:600; color:#333; }
.tip{ margin:20rpx 30rpx 0; color:#888; font-size:24rpx; }
.form{ padding:20rpx 30rpx 40rpx; }
.group{ background:#fff; margin-top:20rpx; border-radius:16rpx; padding:20rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,.04); }
.group-title{ display:block; font-size:28rpx; font-weight:600; color:#333; margin-bottom:10rpx; }
.item{ margin-top:16rpx; }
.label{ display:block; font-size:24rpx; color:#666; margin-bottom:8rpx; }
.input{ height:80rpx; padding:0 20rpx; background:#f9fafb; border:1rpx solid #eee; border-radius:10rpx; font-size:28rpx; }
.textarea{ min-height:160rpx; padding:16rpx 20rpx; background:#f9fafb; border:1rpx solid #eee; border-radius:10rpx; font-size:28rpx; }
.picker{ height:80rpx; padding:0 20rpx; display:flex; align-items:center; background:#f9fafb; border:1rpx solid #eee; border-radius:10rpx; font-size:28rpx; color:#333; }

.uploader{ display:flex; flex-wrap:wrap; gap:20rpx; }
.thumb{ width:200rpx; height:200rpx; position:relative; border-radius:12rpx; overflow:hidden; background:#f2f3f5; }
.img{ width:100%; height:100%; }
.remove{ position:absolute; right:8rpx; top:8rpx; width:40rpx; height:40rpx; background:rgba(0,0,0,.55); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26rpx; }
.add{ width:200rpx; height:200rpx; border:2rpx dashed #e5e5e5; border-radius:12rpx; display:flex; align-items:center; justify-content:center; color:#999; font-size:48rpx; }

.submit-wrap{ padding:30rpx 0; }
.btn{ width:100%; height:88rpx; background:#3cc51f; color:#fff; border-radius:12rpx; font-size:30rpx; display:flex; align-items:center; justify-content:center; }
.btn.disabled{ background:#c9c9c9; }
</style>